<template>
  <Echart :height="160" :options="terminalChartOptions" />
  <div class="flex flex-col items-center text-sm">
    <div class="flex items-center text-gray-500">
      <span>{{ title }}</span>
      <el-popover :width="200" trigger="hover" :content="tips">
        <template #reference>
          <Icon icon="ep:warning" :size="14" />
        </template>
      </el-popover>
    </div>
  </div>
</template>
<script lang="ts" setup>
import * as MemberStatisticsApi from '@/api/mall/statistics/member'
import { EChartsOption } from 'echarts'
import { MemberTerminalStatisticsRespVO } from '@/api/mall/statistics/member'
import { DICT_TYPE, DictDataType, getIntDictOptions } from '@/utils/dict'
import { propTypes } from '@/utils/propTypes'

const props = defineProps({
  tips: propTypes.string.def(''),
  title: propTypes.string.def('').isRequired,
  prefix: propTypes.string.def(''),
  value: propTypes.number.def(0).isRequired
})

defineOptions({ name: 'OKRCard' })

const loading = ref(true) // 加载中
const gaugeData = [
  {
    value: 20,
    name: '旗舰店',

    detail: {
      valueAnimation: true,
      offsetCenter: ['0%', '-20%']
    }
  },
  {
    value: 40,
    name: '三桥店',
    title: {
      offsetCenter: ['0%', '0%']
    },
    detail: {
      valueAnimation: true,
      offsetCenter: ['0%', '10%']
    }
  },
  {
    value: 100,
    name: '五湖路店',
    title: {
      offsetCenter: ['0%', '0%']
    },
    detail: {
      valueAnimation: true,
      offsetCenter: ['0%', '10%']
    }
  }
]
/** 统计图配置 */
const terminalChartOptions = reactive<EChartsOption>({
  tooltip: {
    trigger: 'item',
    confine: true,
    formatter: '{b} : {c} ',
    position: 'bottom'
  },

  series: [
    {
      type: 'gauge',
      startAngle: 90,
      endAngle: -270,
      radius: '90%',
      pointer: {
        show: false
      },
      progress: {
        show: true,
        overlap: false,
        roundCap: true,
        clip: false,
        itemStyle: {
          borderWidth: 1,
          borderColor: '#464646'
        }
      },
      axisLine: {
        lineStyle: {
          width: 30
        }
      },
      splitLine: {
        show: false,
        distance: 0,
        length: 10
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        show: false,
        distance: 50
      },
      data: gaugeData,
      title: {
        fontSize: 14,
        show: false
      },
      detail: {
        width: 50,
        height: 14,
        fontSize: 14,
        color: 'inherit',
        borderColor: 'inherit',
        borderRadius: 20,
        borderWidth: 1,
        show: false,
        formatter: '{value}%'
      }
    }
  ]
}) as EChartsOption

/** 按照终端，查询会员统计列表 */
const getMemberTerminalStatisticsList = async () => {
  loading.value = true
  const list = await MemberStatisticsApi.getMemberTerminalStatisticsList()
  const dictDataList = getIntDictOptions(DICT_TYPE.TERMINAL)
  terminalChartOptions.series![0].data = dictDataList.map((dictData: DictDataType) => {
    const userCount = list.find(
      (item: MemberTerminalStatisticsRespVO) => item.terminal === dictData.value
    )?.userCount
    return {
      name: dictData.label,
      value: userCount || 0
    }
  })
  loading.value = false
}

/** 初始化 **/
onMounted(() => {
  // getMemberTerminalStatisticsList()
})
</script>
